
<template>
  <div>
    <el-row>
      <el-col class="mb-4" :span="24">
        <el-button type="primary" @click="doTianditu()">天地图</el-button>
        <el-button type="primary" @click="doGaode()">高德</el-button>
        <el-button type="primary" @click="doArcgis()">ArcGis</el-button>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="24" style="height: 80vh">
        <CesiumMap ref="cesiumMap"></CesiumMap>
      </el-col>
    </el-row>
  </div>
</template>
  

<script>
import CesiumMap from '../cesiumMap/index.vue'
let viewer = null;

export default {
  name: "MapIndex",
  components: { CesiumMap },
  methods: {
    doTianditu: function () {
      viewer.imageryLayers.removeAll(); 
      this.$refs.cesiumMap.loadTianditu();
    },
    doGaode: function () {
      viewer.imageryLayers.removeAll(); //
      this.$refs.cesiumMap.loadGaode();
     


    },
    doArcgis: function () {
      viewer.imageryLayers.removeAll(); //
      this.$refs.cesiumMap.loadArcgis();
    }
  },
  setup() {
    return {
    };
  },
  mounted() {
    viewer = this.$refs.cesiumMap.viewer;
    console.log(viewer);
  }


};
</script>

<style scoped></style>
